<template>
  <div :style="'width:' + width">
    <div class="form-item-label-top">
      <div style="display: flex; align-items: center">
        <span style="color: red; margin-right: 5px" v-if="required">*</span>
        <div>{{ name }}</div>
      </div>
    </div>
    <div>
      <el-form :label-width="labelWidth" :disabled="disabled" label-position="left" class="sub-form">
        <el-form-item :label="caseName">
          <div style="display: flex">
            <el-select style="flex: 1" v-model="data.caseId" filterable remote reserve-keyword
              placeholder="请输入（被保险人/处理机构/委托日期等）关键词搜索" :remote-method="getCases" :loading="loading" @input="chooseCase">
              <el-option v-for="item in cases" :key="item.CS_ID" :label="'[' + item.CS_ID + ']' + item.CS_DisplayName"
                :value="item.CS_ID"></el-option>
            </el-select>
            <el-button v-if="curCase" :disabled="false" size="small" icon="el-icon-more"
              @click="caseDetailVis = !caseDetailVis"></el-button>
          </div>
        </el-form-item>
        <div v-if="caseDetailVis" style="margin: 20px">
          <div>所属部门：{{ curCase.DPM_Name }}</div>
          <div>流程：{{ curCase.FLOW_Name }}</div>
          <el-link style="color: blue" @click="toCase(curCase.CS_ID)">
            <i class="el-icon-search"></i>
            流水号：{{ curCase.CS_No }}
          </el-link>
          <div>案件名称：{{ curCase.CS_DisplayName }}</div>
          <div>案件状态：{{ curCase.CS_StatusDesc }}</div>
          <div>事故地区：{{ curCase.CS_AccidentAreaDesc }}</div>
          <div>事故时间：{{ curCase.CS_AccidentTime | formatTime }}</div>
          <div>事故原因：{{ curCase.CS_AccidentReason }}</div>
          <div>报销类型：{{ curCase.EXTY_EnumTxt }}</div>
          <div>估损金额：{{ curCase.CS_EstimateLossFee }}元</div>
          <div>定损金额：{{ curCase.CS_LossFee }}元</div>
          <div>报损金额：{{ curCase.CS_ReportLossFee }}元</div>
          <div>理算金额：{{ curCase.CS_AdjustmentFee }}元</div>
          <div>委托日期：{{ curCase.CS_DelegationDate | formatDate }}</div>
          <div>允许添加日志：{{ curCase.CS_AllowLog ? '允许' : '不允许' }}</div>
          <div>允许报销：{{ curCase.CS_AllowExpense ? '允许' : '不允许' }}</div>
          <div v-if="curCase.Employees.length > 0" style="margin-top: 20px">
            <el-table :data="curCase.Employees" stripe border highlight-current-row>
              <el-table-column label="身份" width="160">
                <template slot-scope="scope">
                  {{ scope.row.CSEP_TypeDesc }}
                </template>
              </el-table-column>
              <el-table-column label="公司">
                <template slot-scope="scope">
                  {{ scope.row.CMP_Name }}
                </template>
              </el-table-column>
              <el-table-column label="员工" width="100">
                <template slot-scope="scope">
                  {{ scope.row.USR_Name }}
                </template>
              </el-table-column>
              <el-table-column label="联系方式" width="160">
                <template slot-scope="scope">
                  {{ scope.row.USR_Phone | encodePhone }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-form-item :label="logName" v-if="logEnable">
          <div style="display: flex">
            <el-select style="flex: 1" v-model="data.logId" filterable placeholder="请选择日志" @input="chooseLog">
              <el-option v-for="item in logs" :key="item.CLG_ID" :label="item.CLG_DisplayName"
                :value="item.CLG_ID"></el-option>
            </el-select>
            <el-button v-if="curLog || curEmp" size="small" icon="el-icon-more" @click="logDetailVis = !logDetailVis"
              :disabled="false"></el-button>
          </div>
        </el-form-item>
        <div v-if="logDetailVis">
          <div v-if="logDetailVis" style="margin: 20px">
            <div>提交人：{{ curLog.USR_Name }}</div>
            <div>联系电话：{{ curLog.USR_Phone | encodePhone }}</div>
            <div>流程：{{ curLog.FLOW_Name }}</div>
            <div>
              作业时间：{{ curLog.CLG_StartTime | formatDate }}至{{
                curLog.CLG_EndTime | formatDate
              }}
            </div>
            <div>作业内容：{{ curLog.CLG_Content }}</div>
          </div>
        </div>
        <el-form-item :label="empName" v-if="empEnable">
          <div style="display: flex">
            <el-select style="flex: 1" v-model="data.empId" filterable placeholder="请选择案件成员" @input="chooseEmp">
              <el-option v-for="item in emps" :key="item.CSEP_ID"
                :label="'[' + item.CSEP_TypeDesc + ']' + item.USR_Name" :value="item.CSEP_ID"></el-option>
            </el-select>
            <el-button v-if="curEmp" size="small" icon="el-icon-more" @click="empDetailVis = !empDetailVis"
              :disabled="false"></el-button>
          </div>
        </el-form-item>
        <div v-if="empDetailVis" style="margin: 20px">
          <div>公司：{{ curEmp.CMP_Name }}</div>
          <div v-if="curEmp.USR_Name">员工：{{ curEmp.USR_Name }}</div>
          <div>联系电话：{{ curEmp.USR_Phone | encodePhone }}</div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  getCase,
  getCases,
  getCaseLogs,
  getCaseLog,
  getCaseEmployees,
  getCaseEmployee,
} from '@/api/flowCenter/field/caseDetailSelection'
export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness'],
  data: function () {
    return {
      data: {
        caseId: null,
        logId: null,
        empId: null,
        displayName: '',
      },
      curCase: null,
      curLog: null,
      curEmp: null,
      cases: [],
      logs: [],
      emps: [],
      loading: false,
      caseDetailVis: false,
      logDetailVis: false,
      empDetailVis: false,
    }
  },
  computed: {
    myprops() {
      return this.props ? this.props : []
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '案件内容选择器'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '案件内容选择器'
        }
      }
      return '案件内容选择器'
    },
    caseName() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'caseName')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '案件'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '案件'
        }
      }
      return '案件'
    },
    logName() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'logName')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '日志'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '日志'
        }
      }
      return '日志'
    },
    empName() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'empName')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '成员'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '成员'
        }
      }
      return '成员'
    },
    labelWidth() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'labelWidth')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '140px'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '140px'
        }
      }
      return '140px'
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
    logEnable() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'logEnable')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
    empEnable() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'empEnable')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
    logDisable() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'logDisable')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
    expenseDisable() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'expenseDisable')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
    // showContributions() {
    //   let val = this.myprops.find((x) => x.FLPR_Code == 'showContributions')
    //   if (val) {
    //     if (this.isBusiness) {
    //       return val.BFFP_Value == 'true' || val.BFFP_Value == true
    //         ? true
    //         : false
    //     } else {
    //       return val.FFLP_Value == 'true' || val.FFLP_Value == true
    //         ? true
    //         : false
    //     }
    //   }
    //   return false
    // },
    // showIncomes() {
    //   let val = this.myprops.find((x) => x.FLPR_Code == 'showIncomes')
    //   if (val) {
    //     if (this.isBusiness) {
    //       return val.BFFP_Value == 'true' || val.BFFP_Value == true
    //         ? true
    //         : false
    //     } else {
    //       return val.FFLP_Value == 'true' || val.FFLP_Value == true
    //         ? true
    //         : false
    //     }
    //   }
    //   return false
    // },
    empType() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'empType')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : null
        } else {
          return val.FFLP_Value ? val.FFLP_Value : null
        }
      }
      return null
    },
  },
  methods: {
    toCase(caseId) {
      this.$router.push({
        name: 'caseInfoPage',
        query: { caseId },
      })
    },
    getCases(keyword) {
      if (keyword.length >= 2) {
        this.loading = true
        getCases({
          keyword,
          logDisable: this.logDisable,
          expenseDisable: this.expenseDisable,
        }).then(({ data }) => {
          this.cases = data
          this.loading = false
        })
      }
    },
    getCaseLogs() {
      if (this.logEnable) {
        getCaseLogs({ caseId: this.data.caseId }).then(({ data }) => {
          this.logs = data
          // this.data.logId = this.logs[0]?.CLG_ID
        })
      }
    },
    getCaseEmployees() {
      if (this.empEnable) {
        getCaseEmployees({
          caseId: this.data.caseId,
          type: this.empType,
        }).then(({ data }) => {
          this.emps = data
          this.data.empId = this.emps[0]?.CSEP_ID
          this.chooseEmp(this.data.empId)
        })
      }
    },
    chooseCase(val) {
      getCase(val).then(({ data }) => {
        this.curCase = data
        this.input()
        this.getCaseLogs()
        this.getCaseEmployees()
      })
    },
    chooseLog(val) {
      getCaseLog(val).then(({ data }) => {
        this.curLog = data
        this.input()
      })
    },
    chooseEmp(val) {
      getCaseEmployee(val).then(({ data }) => {
        this.curEmp = data
        this.input()
      })
    },
    input() {
      this.data.caseId = this.curCase.CS_ID
      this.data.logId = this.curLog ? this.curLog.CLG_ID : null
      this.data.empId = this.curEmp ? this.curEmp.CSEP_ID : null
      let logName = this.curLog ? this.curLog.CLG_DisplayName : ''
      let empName = this.curEmp ? '[' + this.curEmp.USR_Name + ']' : ''
      this.data.displayName = `【${this.curCase.CS_No}】${logName}${empName}`
      this.$emit('input', JSON.stringify(this.data))
      this.$emit('display', this.data.displayName)
    },
  },
  mounted: function () {
    if (this.value && Object.keys(this.value).length) {
      this.data = JSON.parse(this.value)
      if (this.data.caseId) {
        getCase(this.data.caseId).then(({ data }) => {
          this.curCase = data
          this.cases = [data]
        })
      }
      if (this.data.logId) {
        getCaseLog(this.data.logId).then(({ data }) => {
          this.curLog = data
          this.logs = [data]
        })
      } else {
        this.getCaseLogs()
      }
      if (this.data.empId) {
        getCaseEmployee(this.data.empId).then(({ data }) => {
          this.curEmp = data
          this.emps = [data]
        })
      } else {
        this.getCaseEmployees()
      }
    }
  },
}
</script>
<style scoped>
.el-form-item {
  margin: 10px !important;
}
</style>